<template>
  <div class="chart-container">
    
       <div class="childDiv"  id="myChart1">
                <!-- <echartsDemo class="echarts-demo" :salaryData="salaryData" ></echartsDemo> -->
               
       </div>
       <div class="childDiv" id="myChart2">
                 <!-- <echartsDemo class="echarts-demo" :salaryData="salaryData"></echartsDemo> -->
                 
       </div>
       <div class="childDiv" id="myChart3">
                 <!-- <echartsDemo class="echarts-demo" :salaryData="salaryData"></echartsDemo> -->
                 
       </div>

  </div>
</template>

<script>
import echarts from "echarts";
import titleName from './components/titleName';
import echartsDemo from './components/echartsDemo';
export default {
  name: "echartsSeis",
  filters: {},
  data() {
    return {
      salaryData:{
           xAxisData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           seriesData:[150, 230, 224, 218, 135, 147, 260],
      },
      configData:[
         {
          typeId:'2',
          type: "line",
          dataX: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          dataY: [150, 230, 224, 218, 135, 147, 260],
         },
         {
          typeId:'3',
          type: "bar",
          dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          dataY: [120, 200, 150, 80, 70, 110, 130],
         },
         {
          typeId:'1',
          type: "pie",
          dataX:  [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          
         },

      ]
        
    };
  },
  components: {
     echartsDemo,
     titleName
  },
  created() {},
  mounted() {
      this.getInit()
  },
  methods: {
       getInit() {

              this.configData.forEach(item=>{
                  if(item.type=='line'){
                    let myChart = echarts.init(document.getElementById("myChart"+item.typeId));
                    let option = {
                        xAxis: {
                          type: "category",
                          data: item.dataX
                        },
                        yAxis: {
                          type: "value"
                        },
                        series: [
                          {
                            data:item.dataY,
                            type: "line"
                          },
                        
                        ]
                    };
                   myChart.setOption(option);
                  }else if(item.type=='bar'){
                      let myChart = echarts.init(document.getElementById("myChart"+item.typeId));
                      let option = {
                          xAxis: {
                            type: "category",
                            data: item.dataX
                          },
                          yAxis: {
                            type: "value"
                          },
                          series: [
                            {
                              data:item.dataY,
                              type: "bar"
                            },
                          
                          ]
                      };
                      myChart.setOption(option);

                  }else if(item.type=='pie'){
                      let myChart = echarts.init(document.getElementById("myChart"+item.typeId));
                      let option = {
                          series: [
                            {
                              name: 'Access From',
                              type: 'pie',
                              radius: '50%',
                              data:item.dataX,
                            },
                          
                          ]
                      };
                      myChart.setOption(option);
                  }

              })

       }
    
     
  }


};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  flex: 1;
  display: flex;
  .childDiv{
        flex: 1;
        display: flex;
        flex-direction: column;
        //background: red;
        margin-right: 10px;
        .title-name{
             // flex: 1;
        }
        .echarts-demo{
               flex: 1;
        }
       
  }
}
</style>
